---
import MdxCode from '$components/Code/MdxCode.astro'
import DocsLayout from '$layouts/DocsLayout.astro'
import { getCollection, render, type CollectionEntry } from 'astro:content'
import QuickNav from '$components/QuickNav/QuickNav.astro'

export async function getStaticPaths() {
  const blogEntries = await getCollection('examples')
  return blogEntries.map((entry) => {
    return {
      params: { slug: entry.id },
      props: { entry }
    }
  })
}

interface Props {
  entry: CollectionEntry<'learn'>
}

const { entry } = Astro.props
const { category } = entry.data
const { Content } = await render(entry)

const title = entry.id.split('/').pop()?.split('.')[0]
---

<DocsLayout
  {entry}
  title={`${title} | Threlte Example`}
>
  <h6>
    {category}
  </h6>
  <h1>
    {title}
  </h1>

  <Content components={{ pre: MdxCode }} />

  <QuickNav />
</DocsLayout>
